<section id="custom-fields" class="pl-24 pr-24 pb-20">
	<hl-page-header title="自定义字段">
		<hl-button size="mini" @on-click="previewPage">预览</hl-button>
		<hl-button size="mini" @on-click="submitData">保存</hl-button>
	</hl-page-header>
	
	<div class="dy-flex mt-15 lc-cf--container">
		<div class="dy-fx-1 border">
			<div class="cf-head" style="text-indent: 10px;">基础字段</div>
			<ul class="field-wrap">
				<li class="field-item cursor" v-for="(item, index) in basicFeilds" @click="addTmp(item)">{{item.name}}</li>
			</ul>
		</div>
		<div class="dy-fx-4 ml-10 mr-10 border">
			<div class="cf-head" style="justify-content: center;">				
				<ul class="customerTypes">
					<li v-for="item in customerTypes" v-if="item.code == selectCustomerType || (item.code == 'VISITOR_FORM' && selectCustomerType =='CUSTOMER') || (item.code == 'CUSTOMER' && selectCustomerType =='VISITOR_FORM')" @click="typeClick(item)" :class="{active: selectCustomerType == item.code}">{{item.name}}</li>
				</ul>
			</div>
			<ul class="field-custom">
				<draggable v-model="tmpData" @change="drapEnd">
				   <li class="field-custom--item" :class="{active: selectIndex == index}" v-for="(item, index) in tmpData" @click="replaceTmp(item, index)">
				   	<span class="el-icon-delete del-tmp-filed--item" @click="delTmpFiled(index)"></span>
						<span class="el-icon-document-copy copy--item" @click="copyItem(item)"></span>
				   	
						<div v-if="item.type != 'line'">
							<div class="first-title" v-html="item.first_level_title.value"></div>
							<div class="second-title" v-html="item.second_level_title.value"></div>
						</div>
						
				   	<!-- text -->
				   	<input type="text" v-if="isTextTypes.indexOf(item.type) > -1" :placeholder="item.placeholder" class="form-control input-readonly" readonly="readonly" style="width: 200px;">
				   	<!-- area -->
				   	<textarea rows="3" v-if="item.type == 'area'" :placeholder="item.placeholder" class="form-control input-readonly" readonly="readonly"></textarea>
				   	<!-- select -->
				   	<hl-select width="200" v-if="item.type == 'select'" type="primary"></hl-select>
				   	<!-- radio -->
				   	<hl-radio :data="item.radio_list" v-if="item.type == 'radio'" :inline="false"></hl-radio>
				   	<!-- checkbox -->
				   	<hl-checkbox :data="item.checkbox_list" v-if="item.type == 'checkbox'" :inline="false"></hl-checkbox>
				   	<!-- line -->
				   	<div class="line-field" v-if="item.type == 'line'"></div>
				   	<!-- time date -->
				   	<web-calendar type="primary" v-if="item.type == 'time' || item.type == 'date'" width="200"></web-calendar>
				   	<!-- file -->
				   	<div class="file-btn el-icon-upload2" v-if="item.type == 'file'"><span class="ml-10">上传</span></div>
				   	<div class="mt-5 color-999 font-12" v-if="item.type == 'file'">支持扩展名：.rar .zip .doc .docx .pdf .jpg</div>
				   </li>
				</draggable>				
			</ul>
		</div>
		<div class="dy-fx-2 border">
			<div class="cf-head" style="text-indent: 10px;">{{rname(tmpObj.type)}}</div>
			
			<div class="strong-title">一级标题</div>
			<div id="editor" class="editor"></div>
			
			<div class="strong-title">二级标题</div>
			<div id="editor1" class="editor"></div>
			
			<div class="strong-title" v-if="isTextTypes.indexOf(tmpObj.type) > -1 || tmpObj.type == 'area' || isBtnTypes.indexOf(tmpObj.type) > -1">默认值</div>
			<div class="default-title">
				<input type="text" class="form-control" v-model="textDefaultVal" placeholder="请输入" v-if="isTextTypes.indexOf(tmpObj.type) > -1 || tmpObj.type == 'area'">
				
				<hl-select width="100%" type="primary" v-if="isBtnTypes.indexOf(tmpObj.type) > -1"></hl-select>
				
				<div class="radio-select" v-if="tmpObj.type == 'radio'">
					<draggable v-model="tmpObj.radio_list" >
					   <div v-for="(element, elIndex) in tmpObj.radio_list"  :key="element.code" class="item-element--drap dy-flex">
							 <span class="expend-radio-item border cursor" :class="{'active n-btn-primary': element.checked}" @click="selectDefault(elIndex)"></span>
							 <span class="el-icon-rank item-element--drap-btn"></span>
							 <input type="text" class="item-element--drap-input" v-model="element.name">
							 <span class="el-icon-delete item-element--drap-del" @click="delOption(elIndex)"></span>
						 </div>
					</draggable>
				</div>
				
				<div class="radio-select" v-if="tmpObj.type == 'select'">
					<draggable v-model="tmpObj.select_list" >
					   <div v-for="(element, elIndex) in tmpObj.select_list" :key="element.code" class="item-element--drap dy-flex">
							 <span class="expend-radio-item border cursor" :class="{'active n-btn-primary': element.checked}" @click="selectDefault(elIndex)"></span>
							 <span class="el-icon-rank item-element--drap-btn"></span>
							 <input type="text" class="item-element--drap-input" v-model="element.name">
							 <span class="el-icon-delete item-element--drap-del" @click="delOption(elIndex)"></span>
						 </div>
					</draggable>
				</div>
				
				<div class="checkbox-wrap" v-if="tmpObj.type == 'checkbox'">
					<draggable v-model="tmpObj.checkbox_list" >
					   <div v-for="(element, elIndex) in tmpObj.checkbox_list" :key="element.code" class="item-element--drap dy-flex auth-config-pop">
							 <div class="cursor" style="font-size: 13px;" :class="{'icon-Gm-confirm color-primary': element.checked, 'config-company': !element.checked}" @click="selectDefault(elIndex)"></div>							
							 <span class="el-icon-rank item-element--drap-btn"></span>
							 <input type="text" class="item-element--drap-input" v-model="element.name">
							 <span class="el-icon-delete item-element--drap-del" @click="delOption(elIndex)"></span>
						 </div>
					</draggable>
				</div>
				<hl-button v-if="isBtnTypes.indexOf(tmpObj.type) > -1" @on-click="addOption">添加选项</hl-button>
			</div>
			
			<div v-if="isTextTypes.indexOf(tmpObj.type) > -1">
				<div class="strong-title">格式</div>
				<div class="default-title">
					<hl-select width="100%" type="primary" :data="format" v-model="selectFormat"></hl-select>
				</div>
			</div>
			
			<div class="strong-title">校验</div>
			<div class="dy-flex cursor" style="align-items: center;width: 95%;margin: 0 auto;" @click="ischeck">
				<div style="font-size: 13px;" :class="{'icon-Gm-confirm color-primary': tmpObj.required_flag == 'Y', 'config-company': !tmpObj.required_flag || tmpObj.required_flag == 'N'}"></div>
				<span class="ml-5">必填</span>
			</div>
			
			<div class="strong-title">是否启用</div>
			<div class="dy-flex" style="align-items: center;width: 95%;margin: 0 auto;">
				<hl-radio :data="isRadio" v-model="selectRadio"></hl-radio>
			</div>
			
			<div class="file-box" v-if="tmpObj.type == 'file'">
				<div class="dy-flex" style="align-items: center;">
					<span style="width: 56px;">单文件≤</span>
					<input type="number" @blur="filechange" v-model="tmpObj.file.size" class="form-control ml-5 mr-5" placeholder="请输入" style="width: 100px;">
					<span>M</span>
					<div class="dy-flex ml-10 cursor" style="align-items: center;" @click="fileSizeLimit">
						<div style="font-size: 13px;" :class="{'icon-Gm-confirm color-primary': tmpObj.file.isSize, 'config-company': !tmpObj.file.isSize}"></div>
						<span class="ml-5">不限制</span>
					</div>
				</div>
				<div class="dy-flex mt-10" style="align-items: center;">
					<span>数量限制</span>
					<div class="ml-5 mr-5">
						<hl-select width="100" type="primary" :data="fileNums" v-model="tmpObj.file.num" @on-change="fileNumChange"></hl-select>
					</div>
					<span style="color: #fff;">M</span>
					<div class="dy-flex ml-10 cursor" style="align-items: center;" @click="fileNumLimit">
						<div style="font-size: 13px;" :class="{'icon-Gm-confirm color-primary': tmpObj.file.isNum, 'config-company': !tmpObj.file.isNum}"></div>
						<span class="ml-5">不限制</span>
					</div>
				</div>
			</div>
			
			<div class="relation">
				<div class="strong-title">关联打印模板</div>
				<div class="dy-flex" style="width: 95%;margin: 0 auto;">
					<div class="dy-flex cursor" style="align-items: center;" :style="{marginLeft:index>0?'20px':'0'}" v-for="(item,index) in customizeColumnData" @click="selectPrintingAsd(item.configCode)">
						<div style="font-size: 13px;" :class="{'config-company': !tmpObj.printTemplateTypes || tmpObj.printTemplateTypes.indexOf(item.configCode) == -1, 'icon-Gm-confirm color-primary': tmpObj.printTemplateTypes && tmpObj.printTemplateTypes.indexOf(item.configCode) > -1}"></div>
						<span class="ml-5">{{item.dictName}}</span>
					</div>					
				</div>
				<div class="strong-title" v-if="tmpObj.printTemplateKey">主键ID</div>
				<p v-if="tmpObj.printTemplateKey" class="ml-10">{{tmpObj.printTemplateKey}}</p>
			</div>
			
			<div style="width: 95%;margin: 0 auto;padding: 20px 0;">
				<hl-button @on-click="tmpSubmit">保存</hl-button>
			</div>
		</div>
	</div>
</section>
<style>
	.copy--item {
		position: absolute;
		right: 35px;
		top: 10px;
		cursor: pointer;
		color: #565e99;
	}
	.file-btn {
		border: 1px solid #ddd;
		background-color: #fff;
		padding: 8px 20px;
	}
	.hl-checkbox-container .item, .hl-radio-container .item {
		margin-bottom: 5px;
	}
	.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
		background-color: #fff;
	}
	.line-field {
		border-bottom: 1px solid #ddd;
		padding-top: 20px;
	}
	.field-custom--item {
		padding: 20px;
		box-sizing: border-box;
		border: 1px solid #ddd;
		position: relative;
	}
	.del-tmp-filed--item {
		position: absolute;
		right: 10px;
		top: 10px;
		cursor: pointer;
		color: #565e99;
	}
	.field-custom--item:hover {
		border: 1px dashed #565e99;
		background: #f9f9ff;
	}
	.field-custom--item.active {
		border: 1px dashed #565e99;
		background: #f9f9ff;
	}
	.field-custom--item .first-title {
		font-weight: bold;
	}
	.field-custom--item .second-title {
		padding: 10px 0;
	}
	.config-company {
		width: 13px;
		height: 13px;
		border-radius: 4px;
		border: 1px solid #ddd;
	}
	.file-box {
		width: 95%;
		margin: 10px auto;
	}
	.item-element--drap-del {
		position: absolute;
		right: 10px;
		top: 15px;
		color: #5e67a5;
		cursor: pointer;
	}
	.item-element--drap {
		height: 40px;
		align-items: center;
		justify-content: space-between;
		margin: 10px 0;
		position: relative;
	}
	.item-element--drap-btn {
		font-size: 20px;
		color: #D8D8D8;
		margin: 0 10px;
		cursor: pointer;
	}
	.item-element--drap-input {
		height: 40px;
		flex: 1;
		background: #f2f2f2;
		border: 0;
		text-indent: 10px;
		color: #666;
	}
	.expend-radio-item {
		position: relative;
		display: inline-block;
		vertical-align: middle;
		width: 13px;
		height: 13px;
		min-width: auto;
		border-radius: 50%;
	}
	.expend-radio-item.active:before {
		content: '';
		position: absolute;
		width: 5px;
		height: 5px;
		background-color: #fff;
		left: 4px;
		top: 4px;
		border-radius: 50%;
	}
	.editor {
		width: 95%;
		margin: 10px auto;		
	}
	.default-title {
		width: 95%;
		margin: 10px auto;
	}
	.strong-title {
		width: 95%;
		margin: 10px auto;
		font-size: 14px;
		font-family: PingFangSC, PingFangSC-Medium;
		font-weight: bold;
	}
	.cf-head {
		height: 46px;
		background: #efefef;
		display: flex;
		align-items: center;
	}
	.cf-head .customerTypes {
		width: 300px;
		height: 34px;
		background: #ffffff;
		border: 1px solid #dfdfdf;
		border-radius: 4px;
		display: flex;
		overflow: hidden;
	}
	.cf-head .customerTypes li{ 
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
	}
	.cf-head .customerTypes li.active {
		background: #565e99;
		color: #fff;
	}
	.field-item {
		width: 85%;
		height: 28px;
		box-sizing: border-box;
		border: 1px solid #e5e5e5;
		border-radius: 2px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 10px auto;
	}
	.field-item:hover {
		border-color: #565e99;
	}
</style>
<script src="scripts/libs/wangEditor.min.js" charset="utf-8"></script>
<script src="modules/custom/scripts/fields.js" charset="utf-8"></script>